<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div
      v-for="article in articleList"
      :key="article.id"
      class="group bg-white rounded-lg ring-1 ring-gray-200 hover:ring-gray-300 transition-all overflow-hidden cursor-pointer"
      @click="handleClick(article)"
    >
      <div class="relative overflow-hidden">
        <!-- <img
          :src="article.thumbnail"
          :alt="article.title"
          class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105"
        /> -->
        <LazyImage
          :src="article?.thumbnail"
          :alt="article?.title"
          image-class="h-48  object-cover transition-transform duration-300 group-hover:scale-105"
          skeleton-class="h-48"
        />
      </div>
      <div class="p-4">
        <h3
          class="text-lg font-semibold mb-2 group-hover:text-primary transition-colors"
        >
          {{ article.title }}
        </h3>
        <p class="text-gray-600 text-sm line-clamp-2">
          {{ article.summary }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getArticleList } from '@/api/modules/content'
import type { Content } from '@/api/interface'
import LazyImage from '@/components/LazyImage/LazyImage.vue'

const router = useRouter()
const articleList = ref<Content.ResArticle[]>([])

const handleClick = (article: Content.ResArticle) => {
  router.push({
    name: 'detail',
    params: { id: article.id },
  })
}

const getHotNews = async () => {
  const params = {
    pageNum: 1,
    pageSize: 6,
    isPublish: true,
  }
  try {
    const res = await getArticleList(params)
    articleList.value = res.data.list
  } catch (error) {
    console.error('获取热门新闻失败:', error)
  }
}

onMounted(() => {
  getHotNews()
})
</script>
